#{extends 'main_adm.html' /}
#{set title:'Cadastro' /}

#{form @salvarCadastro(), enctype:'multipart/form-data'}


#{/form}


<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <title>Cadastro</title>
  <meta name="author" content="Jake Rocheleau">
  
  <link rel="stylesheet" type="text/css" media="all" href="@{'public/stylesheets/form_style.css'}">
  <link rel="stylesheet" type="text/css" media="all" href="@{'public/stylesheets/form_responsive.css'}">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
  
   
  <script type="text/javascript" src="@{'public/javascripts/jquery.min.js'}"></script>
  <script type="text/javascript" src="@{'public/javascripts/jquery.maskedinput-1.3.min.js'}"></script>
  <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> 

</head>

<body>

	<section id="container">

		<h2>Cadastro - Produto</h2>
        
		#{form @salvarCadastro(), enctype:'multipart/form-data', name:'form_cadProduto', id:'form_cadProduto'}
    
		<div id="wrapping" class="clearfix">
			<section id="aligned">
            <h3>Dados do Produto:</h3>
            
			
																																														
			#{field 'produto.nome'}
		        <p class="${field.errorClass}">
		            <input type="text" name="${field.name}" value="${produto?.nome}" id="nome" placeholder="Nome" autocomplete="off" tabindex="10" class="txtinput" required>
		            <span class="error">${field.error}</span>
		        </p>
		    #{/field}
            
            
		    #{field 'produto.descricao'}
		        <p class="${field.errorClass}">
		             <textarea cols="40" id="descricao" rows="8" name="${field.name}" value="${produto?.descricao}" maxlength="300" placeholder="Descrição do Produto" required></textarea>
		            <span class="error">${field.error}</span>
		        </p>
		    #{/field}          
			</section>
	
			<section id="aside" class="clearfix">
				<section id="recipientcase">
                                
                
			    #{field 'valor'}
			        <p class="${field.errorClass}">
			            <input type="text" name="${field.name}" value="${valor}"  id="valor" placeholder="Valor R$:" tabindex="11" class="txtinput" onKeyUp="moeda(this)" required>
			            <span class="error">${field.error}</span>
			        </p>
			    #{/field}
                
				<h4>Categoria:</h4>
                

			    #{select 'categoria.id', value:categoria?.nome, id:'listaCat', name:'listaCat', tabindex:'6', class:'selmenu'}
			        #{list categorias, as:'categoria'}
						#{option value="${categoria.id}"} ${categoria.nome} #{/option}
			        #{/list}
			    #{/select} 
                
                 <h4>Quantidade:</h4>
                
                
			    #{field 'produto.quantidadeEmEstoque'}
			        <p class="${field.errorClass}">
			            <input type="number" name="${field.name}" value="${produto?.quantidadeEmEstoque}" id="quant" autocomplete="off" tabindex="12" min="0" required>
			            <span class="error">${field.error}</span>
			        </p>
			    #{/field}
     			
                <h4>Imagem:</h4>
                <div id="imagem">
                <span class="thumb">             

    			
			    #{field 'uploadFile'}
    			<input class="uploadFile" value="${uploadFile}" name="${field.name}" id="uploadFile" type="file" name="myPhoto" onChange="PreviewImage();" />
			
			    #{/field}    			
                <img class="uploadButton" alt=" title=" src="@{'public/images/Image_Upload.png'}" />  
				</span>
                <img class="uploadImg" id="uploadPreview" style="width: 160px; height: 130px;" />
                </div>        
         			
				</section>
				
			</section>
		</div>


		<section id="buttons">
			<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Limpar">
			<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="13" value="Enviar">
			<br style="clear:both;">
		</section>
	#{/form}
	</section>

</body>
</html>

<script>
	function moeda(z){  
		v = z.value;
		v=v.replace(/\D/g,"")  //permite digitar apenas números
	v=v.replace(/[0-9]{12}/,"inválido")   //limita pra máximo 999.999.999,99
	v=v.replace(/(\d{1})(\d{8})$/,"$1.$2")  //coloca ponto antes dos últimos 8 digitos
	v=v.replace(/(\d{1})(\d{5})$/,"$1.$2")  //coloca ponto antes dos últimos 5 digitos
	v=v.replace(/(\d{1})(\d{1,2})$/,"$1,$2")	//coloca virgula antes dos últimos 2 digitos
		z.value = v;
	}
</script>

<script type="text/javascript">

    function PreviewImage() {
        oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadFile").files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview").src = oFREvent.target.result;
        };
    };

</script>


